<template>
  <div class="sic-overview">
    <!-- 顶部指标条 -->
    <div class="top-metrics">
      <div class="metric-card" v-for="(m, idx) in metrics" :key="m.label">
        <div class="metric-head">
          <div class="metric-label">{{ m.label }}</div>
          <div class="metric-value">{{ animatedMetricValues[idx] || m.value }}</div>
          <div class="metric-sub" v-if="m.sub">{{ m.sub }}</div>
        </div>
      </div>
    </div>

    <div class="content-rows">
      <!-- 左侧：电价信号展示 + 设备安全监控 + 功率实时监控 -->
      <div class="left-col">
        <div class="panel-title">电价信号展示</div>
        <div class="stat-row">
          <div class="stat-box">
            <span class="stat-label">实时电价</span>
            <span class="stat-value">{{ currentPriceDisplay }}</span>
          </div>
        </div>
        <div class="stat-row">
          <div class="stat-box">
            <span class="stat-label">最近1小时均价</span>
            <span class="stat-value">{{ avgPrice1hDisplay }}</span>
          </div>
        </div>
        <div class="stat-row">
          <div class="stat-box">
            <span class="stat-label">近24小时均价</span>
            <span class="stat-value">{{ avgPrice24hDisplay }}</span>
          </div>
        </div>
        <div ref="priceChartRef" class="chart-box"></div>
        <div class="panel-title spaced">功率实时监控</div>
        <div class="switch-row">
          <span class="toggle-label">时间范围</span>
          <button :class="{active: powerRange==='1h'}" @click="setPowerRange('1h')">近1小时</button>
          <button :class="{active: powerRange==='6h'}" @click="setPowerRange('6h')">近6小时</button>
          <button :class="{active: powerRange==='24h'}" @click="setPowerRange('24h')">近24小时</button>
          <span class="toggle-label" style="margin-left:.6rem">功率单位</span>
          <button :class="{active: powerUnit==='kW'}" @click="setPowerUnit('kW')">kW</button>
          <button :class="{active: powerUnit==='MW'}" @click="setPowerUnit('MW')">MW</button>
        </div>
        <div ref="realPowerChartRef" class="chart-box"></div>
      </div>

      <!-- 中间：2.5D流程能流图 -->
      <div class="center-col">
        <div class="panel-title">工业流程可视化</div>
        <MaterialFlow2D class="flow-2d-box" />
      </div>

      <!-- 右侧：企业用电金额与功率统计 -->
      <div class="right-col">
        <div class="panel-title">经济效益仪表盘</div>
        <div class="switch-row">
          <span class="toggle-label">电量单位</span>
          <button :class="{active: energyUnit==='kWh'}" @click="setEnergyUnit('kWh')">kWh</button>
          <button :class="{active: energyUnit==='MWh'}" @click="setEnergyUnit('MWh')">MWh</button>
        </div>
        <!-- 分栏式金额与电量显示，带自动换行与滚动 -->
        <div class="benefit-columns">
          <div class="benefit-item">
            <div class="benefit-label">累计节省金额（元）</div>
            <div class="benefit-value">
              <div class="auto-wrap">
                <div :class="['scroll-text', isAmountLong ? 'scroll' : '']">{{ benefitAmountDisplay }}</div>
              </div>
            </div>
          </div>
          <div class="benefit-item">
            <div class="benefit-label">总节电量</div>
            <div class="benefit-value">
              <div class="auto-wrap">
                <div :class="['scroll-text', isEnergyLong ? 'scroll' : '']">{{ benefitEnergyDisplay }}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="panel-title spaced">设备安全监控（变压器）</div>
        <div class="stat-row">
          <div class="stat-box">
            <span class="stat-label">系统总功率</span>
            <span class="stat-value">{{ currentPowerDisplay }}</span>
          </div>
          <div class="stat-box" :class="loadWarnClass">
            <span class="stat-label">负载率</span>
            <span class="stat-value">{{ loadRate }} %</span>
          </div>
        </div>
        <div class="switch-row">
          <span class="toggle-label">过载阈值</span>
          <input class="slider" type="range" min="50" max="100" step="1" v-model.number="overloadThreshold" @input="setOverloadThreshold(overloadThreshold)" />
          <input class="number" type="number" min="50" max="100" step="1" v-model.number="overloadThreshold" @input="setOverloadThreshold(overloadThreshold)" />
          <span class="toggle-label" style="margin-left:.4rem">当前阈值：{{ overloadThreshold }}%</span>
        </div>

        <div class="panel-title">企业用电金额</div>
        <div class="stat-row">
          <div class="stat-box">
            <span class="stat-label">当月用电金额</span>
            <span class="stat-value">¥{{ monthlyCost.toLocaleString() }}</span>
          </div>
          <div class="stat-box">
            <span class="stat-label">当月节约金额：累计节约金额</span>
            <span class="stat-value">¥{{ monthlyCostSaved }} / ¥{{ totalCostSaved }}</span>
          </div>
        </div>

        <!-- 用电金额折线图（月/年切换） -->
        <div class="switch-row">
          <button :class="{active: costView==='month'}" @click="setCostView('month')">按月</button>
          <button :class="{active: costView==='year'}" @click="setCostView('year')">按年</button>
        </div>
        <div ref="costChartRef" class="chart-box"></div>

        <!-- 原功率统计模块已移除：改为实时功率显示于中间列 -->
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, nextTick, watch, computed, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'
import MaterialFlow2D from './MaterialFlow2D.vue'

export default {
  name: 'SICOverview',
  components: { MaterialFlow2D },
  setup() {
    // 顶部指标
    const metrics = ref([
      { label: '用电设备总数', value: '128 台', sub: '在运 112 / 停机 16' },
      { label: '功率总大小', value: '34.6 MW', sub: '负载率 78%' },
      { label: '炉料合格率', value: '96 %', sub: '目标 ≥ 95%' },
      { label: '品种产量', value: '8,600 t', sub: '黑/绿碳化硅等综合产量' },
      { label: '单位产品综合电耗', value: '2,450 kWh/t', sub: '目标 ≤ 2,600' }
    ])

    // 左侧数据
    // 原企业用电量统计模块已移除

    // 右侧数据
    const monthlyCost = ref(862000)
    const monthlyCostSaved = ref('52,800')
    const totalCostSaved = ref('408,300')
    const costView = ref('month')
    const costChartRef = ref(null)
    let costChart

    // 经济效益仪表盘
    // 经济效益显示（分栏布局）
    const savedAmount = ref(1086000) // 元
    const savedEnergyKWh = ref(1028000) // kWh
    const energyUnit = ref('kWh')
    const setEnergyUnit = (u) => { energyUnit.value = u }
    let benefitTimer
    // 分栏显示格式化与滚动判断
    const formatCurrency = (n) => new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(n)
    const benefitAmountDisplay = computed(() => `${formatCurrency(savedAmount.value)} 元`)
    const benefitEnergyDisplay = computed(() => {
      const val = energyUnit.value === 'kWh' ? savedEnergyKWh.value : (savedEnergyKWh.value / 1000)
      const fmt = new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
      return `${fmt.format(val)} ${energyUnit.value}`
    })
    const isAmountLong = computed(() => benefitAmountDisplay.value.length > 14)
    const isEnergyLong = computed(() => benefitEnergyDisplay.value.length > 14)

    // （已移除）炉料生产统计

    // 柱状图（功率统计）
    // 原功率统计柱状图已移除



    // 顶部指标数值动画
    const animatedMetricValues = ref(Array(metrics.value.length).fill(''))
    const animateMetrics = () => {
      metrics.value.forEach((m, idx) => {
        const match = String(m.value).match(/([0-9.,]+)\s*(.*)/)
        if (!match) { animatedMetricValues.value[idx] = m.value; return }
        const total = parseFloat(match[1].replace(/,/g, ''))
        if (Number.isNaN(total)) { animatedMetricValues.value[idx] = m.value; return }
        const suffix = match[2]
        const hasDecimal = match[1].includes('.')
        const formatter = new Intl.NumberFormat('en-US', { maximumFractionDigits: hasDecimal ? 1 : 0, minimumFractionDigits: hasDecimal ? 1 : 0 })
        const duration = 1200
        const startTime = performance.now()
        const startVal = 0
        const step = (now) => {
          const p = Math.min(1, (now - startTime) / duration)
          const eased = 1 - Math.pow(1 - p, 3)
          const val = startVal + eased * (total - startVal)
          animatedMetricValues.value[idx] = formatter.format(val) + (suffix ? (' ' + suffix) : '')
          if (p < 1) requestAnimationFrame(step)
        }
        requestAnimationFrame(step)
      })
    }


    // 设备安全监控（变压器）
    const threePhaseImbalance = ref(2.5) // %
    const loadRate = ref(78) // %
    const overloadThreshold = ref(85)
    const setOverloadThreshold = (n) => { overloadThreshold.value = n }
    const imbalanceWarnClass = computed(() => {
      return threePhaseImbalance.value >= 20 ? 'warn-red' : (threePhaseImbalance.value >= 10 ? 'warn-yellow' : '')
    })

    onBeforeUnmount(() => {
      if (benefitTimer) clearInterval(benefitTimer)
      if (transformerTimer) clearInterval(transformerTimer)
      if (priceTimer) clearInterval(priceTimer)
      if (realPowerTimer) clearInterval(realPowerTimer)
    })
    const loadWarnClass = computed(() => {
      return loadRate.value >= overloadThreshold.value + 10 ? 'warn-red' : (loadRate.value >= overloadThreshold.value ? 'warn-yellow' : '')
    })
    let transformerTimer

    // 功率实时监控（分钟级，支持范围与kW/MW切换）
    const realPowerChartRef = ref(null)
    let realPowerChart
    const powerUnit = ref('kW')
    const setPowerUnit = (u) => { powerUnit.value = u; renderRealPowerChart() }
    const powerRange = ref('1h')
    const setPowerRange = (r) => { powerRange.value = r; initRealPowerData(); renderRealPowerChart() }
    let realTimes = []
    let realValuesKW = []
    let realPowerTimer
    const formatHM = (d) => `${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`
    const initRealPowerData = () => {
      const hours = powerRange.value === '24h' ? 24 : powerRange.value === '6h' ? 6 : 1
      const count = hours * 60
      const now = new Date()
      realTimes = []
      realValuesKW = []
      for (let i = count - 1; i >= 0; i--) {
        const t = new Date(now.getTime() - i * 60 * 1000)
        realTimes.push(formatHM(t))
        const base = 32000 + Math.sin((count - i) / 30) * 2500
        realValuesKW.push(Math.round(base + Math.random() * 1200))
      }
    }
    const currentPowerDisplay = computed(() => {
      if (!realValuesKW.length) return powerUnit.value === 'kW' ? '— kW' : '— MW'
      const kw = realValuesKW[realValuesKW.length - 1]
      return powerUnit.value === 'kW' ? `${kw.toLocaleString()} kW` : `${(kw/1000).toFixed(2)} MW`
    })
    const renderRealPowerChart = () => {
      if (!realPowerChart) realPowerChart = echarts.init(realPowerChartRef.value)
      const seriesData = powerUnit.value === 'kW' ? realValuesKW : realValuesKW.map(v => +(v/1000).toFixed(2))
      const yName = powerUnit.value === 'kW' ? '功率(kW)' : '功率(MW)'
      const option = {
        backgroundColor: 'transparent',
        title: { text: `系统总功率（单位：${powerUnit.value}）`, left: 'center', top: 6, textStyle: { color: '#9bd7ff', fontSize: 12 } },
        tooltip: { trigger: 'axis', valueFormatter: (v) => `${v} ${powerUnit.value}` },
        grid: { left: 40, right: 20, top: 30, bottom: 35 },
        dataZoom: [ { type: 'slider', height: 12, bottom: 6 }, { type: 'inside' } ],
        xAxis: { type: 'category', data: realTimes, axisLabel: { color: '#9bd7ff', interval: powerRange.value==='24h'?30:5 }, axisLine: { lineStyle: { color: 'rgba(0,108,255,.4)' } } },
        yAxis: { type: 'value', name: yName, nameTextStyle: { color: '#9bd7ff' }, axisLabel: { color: '#9bd7ff' }, splitLine: { show: true, lineStyle: { color: 'rgba(0,108,255,.18)', type: 'dashed' } }, axisLine: { show: true, lineStyle: { color: 'rgba(0,108,255,.3)' } } },
        series: [{
          name: '实时功率', type: 'line', smooth: true, symbol: 'none',
          lineStyle: { width: 2, color: '#9fe6b8' }, areaStyle: { color: 'rgba(159,230,184,.10)' },
          data: seriesData
        }]
      }
      realPowerChart.setOption(option)
    }

    // 电价信号展示（最近24小时，15分钟粒度）
    const priceChartRef = ref(null)
    let priceChart
    let priceTimer
    const currentPrice = ref(0.0)
    const currentPriceDisplay = computed(() => `${currentPrice.value.toFixed(3)} 元/kWh`)
    const priceTimes = ref([])
    const priceSeries = ref([])
    const fmtPrice = (n) => new Intl.NumberFormat('en-US', { minimumFractionDigits: 3, maximumFractionDigits: 3 }).format(n)
    const avgPrice1hDisplay = computed(() => {
      const arr = priceSeries.value
      if (!arr.length) return '— 元/kWh'
      const slice = arr.slice(-4)
      const avg = slice.reduce((a,b)=>a+b,0)/slice.length
      return `${fmtPrice(avg)} 元/kWh`
    })
    const avgPrice24hDisplay = computed(() => {
      const arr = priceSeries.value
      if (!arr.length) return '— 元/kWh'
      const avg = arr.reduce((a,b)=>a+b,0)/arr.length
      return `${fmtPrice(avg)} 元/kWh`
    })
    const genLast24hQuarterHours = () => {
      const now = new Date()
      const points = []
      for (let i = (24 * 60 / 15) - 1; i >= 0; i--) {
        const t = new Date(now.getTime() - i * 15 * 60 * 1000)
        const h = String(t.getHours()).padStart(2, '0')
        const m = String(t.getMinutes()).padStart(2, '0')
        points.push(`${h}:${m}`)
      }
      // 构造电价（模拟峰谷变化）
      const prices = points.map((_, idx) => {
        const base = 0.75 + Math.sin(idx / 8) * 0.12
        const hh = Number(points[idx].slice(0,2))
        const peak = (hh >= 18 && hh <= 22) ? 0.45 : 0
        return +(base + peak + (Math.random() * 0.05)).toFixed(3)
      })
      return { times: points, prices }
    }
    const renderPriceChart = () => {
      if (!priceChart) priceChart = echarts.init(priceChartRef.value)
      const data = genLast24hQuarterHours()
      priceTimes.value = data.times
      priceSeries.value = data.prices
      currentPrice.value = priceSeries.value[priceSeries.value.length - 1]
      const option = {
        backgroundColor: 'transparent',
        title: { text: '实时电价（元/kWh）- 最近24小时', left: 'center', top: 6, textStyle: { color: '#9bd7ff', fontSize: 12 } },
        tooltip: { trigger: 'axis', valueFormatter: (v) => `${v} 元/kWh` },
        grid: { left: 40, right: 20, top: 40, bottom: 40 },
        dataZoom: [
          { type: 'slider', start: 50, end: 100, height: 12, bottom: 6 },
          { type: 'inside' }
        ],
        xAxis: { type: 'category', data: priceTimes.value, axisLabel: { color: '#9bd7ff', interval: 4 }, axisLine: { lineStyle: { color: 'rgba(0,108,255,.4)' } } },
        yAxis: { type: 'value', name: '电价(元/kWh)', nameTextStyle: { color: '#9bd7ff' }, axisLabel: { color: '#9bd7ff' }, splitLine: { show: true, lineStyle: { color: 'rgba(0,108,255,.18)', type: 'dashed' } }, axisLine: { show: true, lineStyle: { color: 'rgba(0,108,255,.3)' } } },
        series: [{
          name: '电价', type: 'line', smooth: true, symbol: 'circle', symbolSize: 6,
          lineStyle: { width: 2, color: '#4c9bfd' }, itemStyle: { color: '#4c9bfd' }, areaStyle: { color: 'rgba(76,155,253,.12)' },
          data: priceSeries.value
        }]
      }
      priceChart.setOption(option)
    }


    // 原用电量折线图切换已移除
    const setCostView = (v) => {
      costView.value = v
      renderCostChart()
    }

    // 构造按月/年数据
    const genMonthlySeries = (base = 1000) => {
      const months = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
      return {
        x: months,
        y: months.map((_, i) => Math.round(base + Math.sin(i/2)*120 + (Math.random()*80)))
      }
    }
    const genYearlySeries = () => {
      const years = ['2020','2021','2022','2023','2024']
      return {
        x: years,
        y: years.map((_, i) => Math.round(820 + i*90 + (Math.random()*100)))
      }
    }


    const renderCostChart = () => {
      if (!costChart) costChart = echarts.init(costChartRef.value)
      const data = costView.value === 'month' ? genMonthlySeries(700) : genYearlySeries()
      const option = {
        backgroundColor: 'transparent',
        title: { text: '用电金额统计（单位：千元）', left: 'center', top: 6, textStyle: { color: '#ffcdd2', fontSize: 12 } },
        tooltip: { trigger: 'axis', valueFormatter: (v) => `${v} 千元`, backgroundColor: 'rgba(40, 0, 0, 0.9)', borderColor: '#ed3f35', borderWidth: 1, textStyle: { color: '#ffcdd2' } },
        grid: { left: 40, right: 20, top: 30, bottom: 30 },
        xAxis: { type: 'category', data: data.x, axisLabel: { color: '#ffcdd2' }, axisLine: { lineStyle: { color: 'rgba(237,63,53,.35)' } }, axisTick: { show: false } },
        yAxis: { type: 'value', name: '金额(千元)', nameTextStyle: { color: '#ffcdd2' }, axisLabel: { color: '#ffcdd2' }, splitLine: { show: true, lineStyle: { color: 'rgba(237,63,53,.18)', type: 'dashed' } }, axisLine: { show: true, lineStyle: { color: 'rgba(237,63,53,.25)' } } },
        series: [{
          name: '用电金额(千元)',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 7,
          lineStyle: { width: 3, color: '#ed3f35', shadowColor: 'rgba(237,63,53,0.6)', shadowBlur: 12 },
          itemStyle: { color: '#ed3f35', borderColor: '#fff', borderWidth: 2 },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0,0,0,1,[
              { offset: 0, color: 'rgba(237,63,53,0.30)' },
              { offset: 0.6, color: 'rgba(237,63,53,0.12)' },
              { offset: 1, color: 'rgba(0,108,255,0.03)' }
            ])
          },
          emphasis: { focus: 'series' },
          animationDuration: 800,
          animationEasing: 'cubicOut',
          data: data.y.map(v => Math.round(v/10))
        }]
      }
      costChart.setOption(option)
    }

    // （已移除）renderProductionPie




    onMounted(async () => {
      await nextTick()
      // 用电量统计模块已移除
      renderCostChart()
      // 经济效益分栏：1秒轻微增长（文本直接显示，去除旧仪表盘）
      benefitTimer = setInterval(() => {
        savedAmount.value += Math.round(40 + Math.random() * 90)
        savedEnergyKWh.value += Math.round(2 + Math.random() * 6)
      }, 1000)

      // 设备安全监控：每秒刷新不平衡度与负载率（移除历史趋势图）
      transformerTimer = setInterval(() => {
        const deltaI = (Math.random() - 0.5) * 1.2
        const nextImb = Math.max(0, threePhaseImbalance.value + deltaI)
        threePhaseImbalance.value = +nextImb.toFixed(1)
        const deltaL = (Math.random() - 0.5) * 4
        const nextLoad = Math.min(100, Math.max(0, loadRate.value + deltaL))
        loadRate.value = Math.round(nextLoad)
      }, 1000)
      renderPriceChart()
      // 每秒更新当前电价并平滑更新曲线末端点
      priceTimer = setInterval(() => {
        const opt = priceChart?.getOption()
        const series = priceSeries.value
        const lastIdx = series.length - 1
        if (lastIdx >= 0) {
          const now = new Date()
          const minutesBucket = Math.floor(now.getMinutes() / 15)
          const hh = now.getHours()
          const base = 0.75 + Math.sin((hh * 4 + minutesBucket) / 8) * 0.12
          const peak = (hh >= 18 && hh <= 22) ? 0.45 : 0
          currentPrice.value = +(base + peak + (Math.random() * 0.03)).toFixed(3)
          priceSeries.value[lastIdx] = currentPrice.value
          priceChart.setOption({ series: [{ data: priceSeries.value }], animationDurationUpdate: 300, animationEasingUpdate: 'cubicOut' })
        }
      }, 1000)
      // 初始化与启动功率实时监控（按分钟基础，秒级平滑）
      initRealPowerData()
      renderRealPowerChart()
      realPowerTimer = setInterval(() => {
        const now = new Date()
        // 逐秒更新：在当前分钟点进行细粒度抖动
        const base = 32000 + Math.sin(realValuesKW.length / 30) * 2500
        const nextKW = Math.round(base + (Math.random() * 600 - 300))
        const ts = `${String(now.getHours()).padStart(2,'0')}:${String(now.getMinutes()).padStart(2,'0')}`
        if (realTimes.length && realTimes[realTimes.length - 1] === ts) {
          realValuesKW[realValuesKW.length - 1] = nextKW
        } else {
          realTimes.push(ts)
          realValuesKW.push(nextKW)
        }
        const hours = powerRange.value === '24h' ? 24 : powerRange.value === '6h' ? 6 : 1
        const count = hours * 60
        realTimes = realTimes.slice(-count)
        realValuesKW = realValuesKW.slice(-count)
        // 增量刷新
        const seriesData = powerUnit.value === 'kW' ? realValuesKW : realValuesKW.map(v => +(v/1000).toFixed(2))
        realPowerChart && realPowerChart.setOption({ xAxis: { data: realTimes }, series: [{ data: seriesData }], animationDurationUpdate: 300, animationEasingUpdate: 'cubicOut' })
      }, 1000)
      animateMetrics()
      window.addEventListener('resize', () => {
        costChart && costChart.resize()
        priceChart && priceChart.resize()
        realPowerChart && realPowerChart.resize()
      })
    })

    watch(costView, renderCostChart)

    return {
      metrics,
      monthlyCost,
      monthlyCostSaved,
      totalCostSaved,
      costView,
      setCostView,
      costChartRef,
      // 经济效益仪表盘
      benefitAmountDisplay,
      benefitEnergyDisplay,
      isAmountLong,
      isEnergyLong,
      energyUnit,
      setEnergyUnit,
      // 设备安全监控
      threePhaseImbalance,
      loadRate,
      overloadThreshold,
      setOverloadThreshold,
      loadWarnClass,
      // 已移除三相不平衡度历史趋势图
      // 电价信号展示
      priceChartRef,
      currentPriceDisplay,
      avgPrice1hDisplay,
      avgPrice24hDisplay,
      // 功率实时监控
      realPowerChartRef,
      powerUnit,
      setPowerUnit,
      powerRange,
      setPowerRange,
      currentPowerDisplay,
      animatedMetricValues
    }
  }
}
</script>

<style scoped>
.sic-overview {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.8rem;
  height: 100vh;
  padding: 0.5rem;
  box-sizing: border-box;
}

.top-metrics {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.6rem;
  min-height: 5rem;
}

.metric-card {
  position: relative;
  padding: 0.6rem 0.8rem;
  border: 1px solid #006cff;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0, 108, 255, 0.1) 0%, rgba(0, 20, 40, 0.15) 100%);
  overflow: hidden;
  will-change: transform, box-shadow;
  transition: transform .25s ease, box-shadow .25s ease;
  min-height: 4rem;
  display: flex;
  align-items: center;
}

.metric-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,108,255,.15), transparent);
  animation: slideGlow 3s linear infinite;
}

/* 柔和的极光特效覆盖层 */
.metric-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  background: 
    radial-gradient(60% 40% at 25% 20%, rgba(0,242,241,.10), transparent 60%),
    radial-gradient(40% 60% at 80% 75%, rgba(0,108,255,.10), transparent 60%);
  filter: blur(4px);
  animation: auroraShift 8s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes auroraShift { 0%{ transform: translate3d(0,0,0); } 100%{ transform: translate3d(2%, -2%, 0); } }
.metric-card:hover { transform: translateY(-1px); box-shadow: 0 0 12px rgba(0,108,255,.45); }
@keyframes slideGlow { 0% { left:-100%; } 100% { left:100%; } }

.metric-head { 
  display: flex; 
  flex-direction: column;
  align-items: flex-start; 
  justify-content: center; 
  gap: 0.2rem; 
  width: 100%;
  height: 100%;
}

.metric-label { 
  position: relative; 
  font-size: 0.65rem; 
  background: linear-gradient(90deg, #4c9bfd, #9fe6b8); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
  letter-spacing: 0.02em; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  width: 100%;
  line-height: 1.2;
}

.metric-value { 
  color: #00f2f1; 
  font-size: 1.2rem; 
  font-weight: bold; 
  text-shadow: 0 0 10px rgba(0,242,241,.6); 
  letter-spacing: 0.02em; 
  white-space: nowrap; 
  line-height: 1.2;
}

.metric-sub { 
  color: #9fe6b8; 
  font-size: 0.6rem; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  width: 100%;
  line-height: 1.1;
}

.content-rows { 
  display: grid; 
  grid-template-columns: 2.5fr 4fr 2.5fr; 
  gap: 0.8rem; 
  height: calc(100vh - 7rem);
  min-height: 600px;
}

.panel-title { color:#fff; font-size:.75rem; text-align:center; margin-bottom:.3rem; }
.panel-title.spaced { margin-top:.4rem; }

.left-col, .center-col, .right-col { display:flex; flex-direction:column; height:100%; gap: .6rem; }
.stat-row { display:grid; grid-template-columns: 1fr; gap:.4rem; }
.stat-box { position:relative; display:flex; justify-content:space-between; align-items:center; padding:.5rem .7rem; border:1px solid rgba(0,108,255,.5); border-radius:8px; background:linear-gradient(135deg, rgba(0,20,40,.35), rgba(0,5,15,.45)); color:#fff; overflow:hidden; }
.stat-box.warn-yellow { border-color: rgba(255, 214, 79, .85); box-shadow: inset 0 0 10px rgba(255, 214, 79, .25); }
.stat-box.warn-red { border-color: rgba(237, 63, 53, .85); box-shadow: inset 0 0 10px rgba(237, 63, 53, .25); }
.stat-box::after { content:''; position:absolute; left:-40%; top:0; width:40%; height:100%; background:linear-gradient(90deg, transparent, rgba(0,108,255,.18), transparent); filter: blur(2px); animation: sweep 4s linear infinite; }
@keyframes sweep { 0%{ left:-40%; } 100%{ left:110%; } }
.stat-label { position:relative; font-size:.56rem; background: linear-gradient(90deg, #4c9bfd, #9fe6b8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing:.03em; text-shadow: 0 0 6px rgba(76,155,253,.3); }
.stat-label::after { content:''; position:absolute; left:0; bottom:-2px; height:2px; width:100%; background: linear-gradient(90deg, rgba(0,108,255,0), rgba(0,108,255,.6), rgba(0,108,255,0)); animation: underlineMove 3s linear infinite; }
@keyframes underlineMove { 0%{ opacity:.15; transform: scaleX(0); } 50%{ opacity:.35; transform: scaleX(1); } 100%{ opacity:.15; transform: scaleX(0); } }
.stat-value { color:#00f2f1; font-size:.95rem; font-weight:bold; letter-spacing:.02em; text-shadow: 0 0 8px rgba(0,242,241,.45), 0 0 16px rgba(0,242,241,.25); }

.switch-row { display:flex; gap:.4rem; margin:.4rem 0; }
.switch-row button { padding:.25rem .6rem; color:#4c9bfd; border:1px solid #006cff; background:rgba(0,108,255,.1); border-radius:4px; cursor:pointer; }
.switch-row button.active { background:#006cff; color:#fff; }
.switch-row .toggle-label { align-self:center; color:#9bd7ff; font-size:.6rem; margin-right:.2rem; }
.switch-row input.slider { width: 8rem; accent-color: #006cff; }
.switch-row input.number { width: 4rem; padding: .2rem .3rem; border:1px solid #006cff; border-radius:4px; background: rgba(0,108,255,.08); color:#9bd7ff; }

.chart-box { 
  flex: 0 0 auto; 
  height: 12rem; 
  border: 1px solid rgba(0,108,255,.25); 
  border-radius: 8px; 
  background: rgba(0, 0, 0, 0.35);
  margin-bottom: 0.5rem;
}

.chart-box.small { 
  height: 11rem; 
}

/* 经济效益分栏与滚动样式 */
.benefit-columns { display: grid; grid-template-columns: 1fr; gap: .5rem; margin-bottom: .4rem; }
.benefit-item { border:1px solid rgba(0,108,255,.4); border-radius:8px; background:linear-gradient(135deg, rgba(0,20,40,.35), rgba(0,5,15,.45)); padding:.5rem .7rem; }
.benefit-label { color:#9bd7ff; font-size:.65rem; margin-bottom:.25rem; }
.benefit-value { color:#00f2f1; font-size:1.05rem; font-weight:bold; letter-spacing:.02em; text-shadow:0 0 8px rgba(0,242,241,.35); }
.auto-wrap { width:100%; overflow:hidden; }
.scroll-text { display:inline-block; white-space:nowrap; }
.scroll-text.scroll { animation: marquee 10s linear infinite; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-30%); } }

/* 仪表盘布局 */
.gauge-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
  margin-bottom: .3rem;
}
.gauge-card { display: flex; flex-direction: column; }
.gauge-title { color:#9bd7ff; font-size:.65rem; text-align:center; margin-bottom:.2rem; }

.pie-caption, .bar-caption, .flow-caption { display: none; }
.flow-desc { display: none; }

.flow-2d-box { 
  flex: 1; 
  min-height: 20rem; 
  border: 1px solid rgba(0,108,255,.25); 
  border-radius: 8px; 
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

@media screen and (max-width: 1400px) {
  .chart-box { height: 10rem; }
  .chart-box.small { height: 9rem; }
  .flow-2d-box { min-height: 15rem; }
  .content-rows { height: calc(100vh - 6.5rem); }
}

@media screen and (max-width: 1280px) {
  .metric-value { font-size: 1rem; }
  .chart-box { height: 9rem; }
  .chart-box.small { height: 8rem; }
  .flow-2d-box { min-height: 13rem; }
  .content-rows { height: calc(100vh - 6rem); }
}

@media screen and (max-width: 1024px) {
  .sic-overview {
    grid-template-rows: auto auto;
    height: auto;
    min-height: 100vh;
  }
  
  .content-rows {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    height: auto;
    gap: 1rem;
  }
  
  .chart-box { height: 8rem; }
  .chart-box.small { height: 7rem; }
  .flow-2d-box { min-height: 10rem; }
}
</style>